<template>
    <div class="search">
        <Row>
            <Col>
                <Card>
                    <Row @keydown.enter.native="handleSearch">
                        <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
                            <Form-item label="id" prop="id">
                                <Input type="text" v-model="searchForm.id" placeholder="请输入id" clearable style="width: 200px"/>
                            </Form-item>
                            <Form-item label="产品分类id" prop="kindId">
                                <Input type="text" v-model="searchForm.kindId" placeholder="请输入产品分类id" clearable style="width: 200px"/>
                            </Form-item>
                            <span v-if="drop">
                <Form-item label="产品" prop="productName">
                  <Input type="text" v-model="searchForm.productName" placeholder="请输入产品" clearable style="width: 200px"/>
                </Form-item>
                <Form-item label="产品型号名" prop="productModelName">
                  <Input type="text" v-model="searchForm.productModelName" placeholder="请输入产品型号名" clearable style="width: 200px"/>
                </Form-item>
                <Form-item label="产品品号" prop="productOrderName">
                  <Input type="text" v-model="searchForm.productOrderName" placeholder="请输入产品品号" clearable style="width: 200px"/>
                </Form-item>
                <Form-item label="颜色表id" prop="colorId">
                  <Input type="text" v-model="searchForm.colorId" placeholder="请输入颜色表id" clearable style="width: 200px"/>
                </Form-item>
                <Form-item label="产品颜色" prop="color">
                  <Input type="text" v-model="searchForm.color" placeholder="请输入产品颜色" clearable style="width: 200px"/>
                </Form-item>
                <Form-item label="产品色号" prop="colorNumber">
                  <Input type="text" v-model="searchForm.colorNumber" placeholder="请输入产品色号" clearable style="width: 200px"/>
                </Form-item>
                <Form-item label="产品材质" prop="material">
                  <Input type="text" v-model="searchForm.material" placeholder="请输入产品材质" clearable style="width: 200px"/>
                </Form-item>
                <Form-item label="单台体积" prop="unitVolume">
                  <Input type="text" v-model="searchForm.unitVolume" placeholder="请输入单台体积" clearable style="width: 200px"/>
                </Form-item>
                <Form-item label="上市时间" prop="timeToMarket">
                  <Input type="text" v-model="searchForm.timeToMarket" placeholder="请输入上市时间" clearable style="width: 200px"/>
                </Form-item>
                <Form-item label="最低起订量" prop="minOrderAmount">
                  <Input type="text" v-model="searchForm.minOrderAmount" placeholder="请输入最低起订量" clearable style="width: 200px"/>
                </Form-item>
                <Form-item label="最低销售价" prop="minSellingPrice">
                  <Input type="text" v-model="searchForm.minSellingPrice" placeholder="请输入最低销售价" clearable style="width: 200px"/>
                </Form-item>
                <Form-item label="全国统一价格" prop="uniformSalesPrice">
                  <Input type="text" v-model="searchForm.uniformSalesPrice" placeholder="请输入全国统一价格" clearable style="width: 200px"/>
                </Form-item>
                <Form-item label="换算比例" prop="conversionRatio">
                  <Input type="text" v-model="searchForm.conversionRatio" placeholder="请输入换算比例" clearable style="width: 200px"/>
                </Form-item>
                <Form-item label="两地费" prop="bothfee">
                  <Input type="text" v-model="searchForm.bothfee" placeholder="请输入两地费" clearable style="width: 200px"/>
                </Form-item>
                <Form-item label="产品单位" prop="unit">
                  <Input type="text" v-model="searchForm.unit" placeholder="请输入产品单位" clearable style="width: 200px"/>
                </Form-item>
                <Form-item label="产品价格" prop="price">
                  <Input type="text" v-model="searchForm.price" placeholder="请输入产品价格" clearable style="width: 200px"/>
                </Form-item>
                <Form-item label="最小单位" prop="unitMin">
                  <Input type="text" v-model="searchForm.unitMin" placeholder="请输入最小单位" clearable style="width: 200px"/>
                </Form-item>
                <Form-item label="最大单位" prop="unitMax">
                  <Input type="text" v-model="searchForm.unitMax" placeholder="请输入最大单位" clearable style="width: 200px"/>
                </Form-item>
                <Form-item label="报告" prop="reportCertificate">
                  <Input type="text" v-model="searchForm.reportCertificate" placeholder="请输入报告" clearable style="width: 200px"/>
                </Form-item>
                <Form-item label="产品图片" prop="picPath">
                  <Input type="text" v-model="searchForm.picPath" placeholder="请输入产品图片" clearable style="width: 200px"/>
                </Form-item>
                <Form-item label="备注" prop="remark">
                  <Input type="text" v-model="searchForm.remark" placeholder="请输入备注" clearable style="width: 200px"/>
                </Form-item>
                <Form-item label="20尺码" prop="two">
                  <Input type="text" v-model="searchForm.two" placeholder="请输入20尺码" clearable style="width: 200px"/>
                </Form-item>
                <Form-item label="40尺码" prop="four">
                  <Input type="text" v-model="searchForm.four" placeholder="请输入40尺码" clearable style="width: 200px"/>
                </Form-item>
                <Form-item label="40尺码HQ" prop="fourHQ">
                  <Input type="text" v-model="searchForm.fourHQ" placeholder="请输入40尺码HQ" clearable style="width: 200px"/>
                </Form-item>
              </span>
                            <Form-item style="margin-left:-35px;" class="br">
                                <Button @click="handleSearch" type="primary" icon="ios-search">搜索</Button>
                                <Button @click="handleReset">重置</Button>
                                <a class="drop-down" @click="dropDown">
                                    {{dropDownContent}}
                                    <Icon :type="dropDownIcon"></Icon>
                                </a>
                            </Form-item>
                        </Form>
                    </Row>
                    <Row class="operation">
                        <Button @click="add" type="primary" icon="md-add">添加</Button>
                        <Button @click="delAll" icon="md-trash">批量删除</Button>
                        <Button @click="getDataList" icon="md-refresh">刷新</Button>
                    </Row>
                    <Row>
                        <Alert show-icon>
                            已选择 <span class="select-count">{{selectCount}}</span> 项
                            <a class="select-clear" @click="clearSelectAll">清空</a>
                        </Alert>
                    </Row>
                    <Row>
                        <Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom" @on-sort-change="changeSort" @on-selection-change="changeSelect"></Table>
                    </Row>
                    <Row type="flex" justify="end" class="page">
                        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10,20,50]" size="small" show-total show-elevator show-sizer></Page>
                    </Row>
                </Card>
            </Col>
        </Row>
        <Modal :title="modalTitle" v-model="modalVisible" :mask-closable='false' :width="500">
            <Form ref="form" :model="form" :label-width="100" :rules="formValidate" >        <FormItem label="id" prop="id" >
                <Input v-model="form.id" style="width:100%"/>
            </FormItem>
                <FormItem label="产品分类id" prop="kindId" >
                    <Input v-model="form.kindId" style="width:100%"/>
                </FormItem>
                <FormItem label="产品" prop="productName" >
                    <Input v-model="form.productName" style="width:100%"/>
                </FormItem>
                <FormItem label="产品型号名" prop="productModelName" >
                    <Input v-model="form.productModelName" style="width:100%"/>
                </FormItem>
                <FormItem label="产品品号" prop="productOrderName" >
                    <Input v-model="form.productOrderName" style="width:100%"/>
                </FormItem>
                <FormItem label="颜色表id" prop="colorId" >
                    <Input v-model="form.colorId" style="width:100%"/>
                </FormItem>
                <FormItem label="产品颜色" prop="color" >
                    <Input v-model="form.color" style="width:100%"/>
                </FormItem>
                <FormItem label="产品色号" prop="colorNumber" >
                    <Input v-model="form.colorNumber" style="width:100%"/>
                </FormItem>
                <FormItem label="产品材质" prop="material" >
                    <Input v-model="form.material" style="width:100%"/>
                </FormItem>
                <FormItem label="单台体积" prop="unitVolume" >
                    <Input v-model="form.unitVolume" style="width:100%"/>
                </FormItem>
                <FormItem label="上市时间" prop="timeToMarket" >
                    <Input v-model="form.timeToMarket" style="width:100%"/>
                </FormItem>
                <FormItem label="最低起订量" prop="minOrderAmount" >
                    <Input v-model="form.minOrderAmount" style="width:100%"/>
                </FormItem>
                <FormItem label="最低销售价" prop="minSellingPrice" >
                    <Input v-model="form.minSellingPrice" style="width:100%"/>
                </FormItem>
                <FormItem label="全国统一价格" prop="uniformSalesPrice" >
                    <Input v-model="form.uniformSalesPrice" style="width:100%"/>
                </FormItem>
                <FormItem label="换算比例" prop="conversionRatio" >
                    <Input v-model="form.conversionRatio" style="width:100%"/>
                </FormItem>
                <FormItem label="两地费" prop="bothfee" >
                    <Input v-model="form.bothfee" style="width:100%"/>
                </FormItem>
                <FormItem label="产品单位" prop="unit" >
                    <Input v-model="form.unit" style="width:100%"/>
                </FormItem>
                <FormItem label="产品价格" prop="price" >
                    <Input v-model="form.price" style="width:100%"/>
                </FormItem>
                <FormItem label="最小单位" prop="unitMin" >
                    <Input v-model="form.unitMin" style="width:100%"/>
                </FormItem>
                <FormItem label="最大单位" prop="unitMax" >
                    <Input v-model="form.unitMax" style="width:100%"/>
                </FormItem>
                <FormItem label="报告" prop="reportCertificate" >
                    <Input v-model="form.reportCertificate" style="width:100%"/>
                </FormItem>
                <FormItem label="产品图片" prop="picPath" >
                    <Input v-model="form.picPath" style="width:100%"/>
                </FormItem>
                <FormItem label="备注" prop="remark" >
                    <Input v-model="form.remark" style="width:100%"/>
                </FormItem>
                <FormItem label="20尺码" prop="two" >
                    <Input v-model="form.two" style="width:100%"/>
                </FormItem>
                <FormItem label="40尺码" prop="four" >
                    <Input v-model="form.four" style="width:100%"/>
                </FormItem>
                <FormItem label="40尺码HQ" prop="fourHQ" >
                    <Input v-model="form.fourHQ" style="width:100%"/>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" @click="modalVisible=false">取消</Button>
                <Button type="primary" :loading="submitLoading" @click="handleSubmit">提交</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import {
        getAllProductOrder,
        addProductOrder,
        editProductOrder
    } from "@/api/index";
    export default {
        name: "productOrder",
        components: {
        },
        data() {
            return {
                loading: true, // 表单加载状态
                modalType: 0, // 添加或编辑标识
                modalVisible: false, // 添加或编辑显示
                modalTitle: "", // 添加或编辑标题
                drop: false,
                dropDownContent: "展开",
                dropDownIcon: "ios-arrow-down",
                searchForm: { // 搜索框初始化对象
                    pageNumber: 1, // 当前页数
                    pageSize: 10, // 页面大小
                    sort: "createTime", // 默认排序字段
                    order: "desc", // 默认排序方式
                },
                form: { // 添加或编辑表单对象初始化数据
                    id: "",
                    kindId: "",
                    productName: "",
                    productModelName: "",
                    productOrderName: "",
                    colorId: "",
                    color: "",
                    colorNumber: "",
                    material: "",
                    unitVolume: "",
                    timeToMarket: "",
                    minOrderAmount: "",
                    minSellingPrice: "",
                    uniformSalesPrice: "",
                    conversionRatio: "",
                    bothfee: "",
                    unit: "",
                    price: "",
                    unitMin: "",
                    unitMax: "",
                    reportCertificate: "",
                    picPath: "",
                    remark: "",
                    two: "",
                    four: "",
                    fourHQ: "",
                },
                // 表单验证规则
                formValidate: {
                    id: [{ required: true, message: "不能为空", trigger: "blur" }],
                    kindId: [{ required: true, message: "不能为空", trigger: "blur" }],
                    productName: [{ required: true, message: "不能为空", trigger: "blur" }],
                    productModelName: [{ required: true, message: "不能为空", trigger: "blur" }],
                    productOrderName: [{ required: true, message: "不能为空", trigger: "blur" }],
                    colorId: [{ required: true, message: "不能为空", trigger: "blur" }],
                    color: [{ required: true, message: "不能为空", trigger: "blur" }],
                    colorNumber: [{ required: true, message: "不能为空", trigger: "blur" }],
                    material: [{ required: true, message: "不能为空", trigger: "blur" }],
                    unitVolume: [{ required: true, message: "不能为空", trigger: "blur" }],
                    timeToMarket: [{ required: true, message: "不能为空", trigger: "blur" }],
                    minOrderAmount: [{ required: true, message: "不能为空", trigger: "blur" }],
                    minSellingPrice: [{ required: true, message: "不能为空", trigger: "blur" }],
                    uniformSalesPrice: [{ required: true, message: "不能为空", trigger: "blur" }],
                    conversionRatio: [{ required: true, message: "不能为空", trigger: "blur" }],
                    bothfee: [{ required: true, message: "不能为空", trigger: "blur" }],
                    unit: [{ required: true, message: "不能为空", trigger: "blur" }],
                    price: [{ required: true, message: "不能为空", trigger: "blur" }],
                    unitMin: [{ required: true, message: "不能为空", trigger: "blur" }],
                    unitMax: [{ required: true, message: "不能为空", trigger: "blur" }],
                    reportCertificate: [{ required: true, message: "不能为空", trigger: "blur" }],
                    picPath: [{ required: true, message: "不能为空", trigger: "blur" }],
                    remark: [{ required: true, message: "不能为空", trigger: "blur" }],
                    two: [{ required: true, message: "不能为空", trigger: "blur" }],
                    four: [{ required: true, message: "不能为空", trigger: "blur" }],
                    fourHQ: [{ required: true, message: "不能为空", trigger: "blur" }],
                },
                submitLoading: false, // 添加或编辑提交状态
                selectList: [], // 多选数据
                selectCount: 0, // 多选计数
                columns: [
                    // 表头
                    {
                        type: "selection",
                        width: 60,
                        align: "center"
                    },
                    {
                        type: "index",
                        width: 60,
                        align: "center"
                    },
                    {
                        title: "产品",
                        key: "productName",
                        minWidth: 120,
                        sortable: true,
                    },
                    {
                        title: "产品型号名",
                        key: "productModelName",
                        minWidth: 120,
                        sortable: true,
                    },
                    {
                        title: "产品品号",
                        key: "productOrderName",
                        minWidth: 120,
                        sortable: true,
                    },
                    {
                        title: "产品颜色",
                        key: "color",
                        minWidth: 120,
                        sortable: true,
                    },
                    {
                        title: "产品色号",
                        key: "colorNumber",
                        minWidth: 120,
                        sortable: true,
                    },
                    {
                        title: "产品材质",
                        key: "material",
                        minWidth: 120,
                        sortable: true,
                    },
                    {
                        title: "单台体积",
                        key: "unitVolume",
                        minWidth: 120,
                        sortable: true,
                    },
                    {
                        title: "上市时间",
                        key: "timeToMarket",
                        minWidth: 120,
                        sortable: true,
                    },
                    {
                        title: "最低起订量",
                        key: "minOrderAmount",
                        minWidth: 120,
                        sortable: true,
                    },
                    {
                        title: "最低销售价",
                        key: "minSellingPrice",
                        minWidth: 120,
                        sortable: true,
                    },
                    {
                        title: "全国统一价",
                        key: "uniformSalesPrice",
                        minWidth: 120,
                        sortable: true,
                    },
                    {
                        title: "两地费",
                        key: "bothfee",
                        minWidth: 120,
                        sortable: true,
                    },
                    {
                        title: "备注",
                        key: "remark",
                        minWidth: 120,
                        sortable: true,
                    },
                    {
                        title: "操作",
                        key: "action",
                        align: "center",
                        width: 200,
                        render: (h, params) => {
                            return h("div", [
                                h(
                                    "Button",
                                    {
                                        props: {
                                            type: "primary",
                                            size: "small",
                                            icon: "ios-create-outline"
                                        },
                                        style: {
                                            marginRight: "5px"
                                        },
                                        on: {
                                            click: () => {
                                                this.edit(params.row);
                                            }
                                        }
                                    },
                                    "编辑"
                                ),
                                h(
                                    "Button",
                                    {
                                        props: {
                                            type: "error",
                                            size: "small",
                                            icon: "md-trash"
                                        },
                                        on: {
                                            click: () => {
                                                this.remove(params.row);
                                            }
                                        }
                                    },
                                    "删除"
                                )
                            ]);
                        }
                    }
                ],
                data: [], // 表单数据
                total: 0 // 表单数据总数
            };
        },
        methods: {
            init() {
                this.getDataList();
            },
            changePage(v) {
                this.searchForm.pageNumber = v;
                this.getDataList();
                this.clearSelectAll();
            },
            changePageSize(v) {
                this.searchForm.pageSize = v;
                this.getDataList();
            },
            handleSearch() {
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.getDataList();
            },
            handleReset() {
                this.$refs.searchForm.resetFields();
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                // 重新加载数据
                this.getDataList();
            },
            changeSort(e) {
                this.searchForm.sort = e.key;
                this.searchForm.order = e.order;
                if (e.order === "normal") {
                    this.searchForm.order = "";
                }
                this.getDataList();
            },
            clearSelectAll() {
                this.$refs.table.selectAll(false);
            },
            changeSelect(e) {
                this.selectList = e;
                this.selectCount = e.length;
            },
            dropDown() {
                if (this.drop) {
                    this.dropDownContent = "展开";
                    this.dropDownIcon = "ios-arrow-down";
                } else {
                    this.dropDownContent = "收起";
                    this.dropDownIcon = "ios-arrow-up";
                }
                this.drop = !this.drop;
            },
            getDataList() {
                this.loading = true;
                getAllProductOrder(this.searchForm).then(res => {
                    console.log(res);
                    this.loading = false;
                    if (res.success) {
                        this.data = res.result.records;
                        this.total = res.result.total;
                    }
                });
                // 带多条件搜索参数获取表单数据 请自行修改接口
                // this.getRequest("请求路径", this.searchForm).then(res => {
                //   this.loading = false;
                //   if (res.success) {
                //     this.data = res.result.content;
                //     this.total = res.result.totalElements;
                //   }
                // });
                // 以下为模拟数据
                //this.data = [
                //];
                this.total = this.data.length;
                this.loading = false;
            },
            handleSubmit() {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        this.submitLoading = true;
                        if (this.modalType === 0) {
                            // 添加 避免编辑后传入id等数据 记得删除
                            delete this.form.id;
                            // this.postRequest("请求地址", this.form).then(res => {
                            //   this.submitLoading = false;
                            //   if (res.success) {
                            //     this.$Message.success("操作成功");
                            //     this.getDataList();
                            //     this.modalVisible = false;
                            //   }
                            // });
                            // 模拟请求成功
                            this.submitLoading = false;
                            this.$Message.success("操作成功");
                            this.getDataList();
                            this.modalVisible = false;
                        } else {
                            // 编辑
                            // this.postRequest("请求地址", this.form).then(res => {
                            //   this.submitLoading = false;
                            //   if (res.success) {
                            //     this.$Message.success("操作成功");
                            //     this.getDataList();
                            //     this.modalVisible = false;
                            //   }
                            // });
                            // 模拟请求成功
                            this.submitLoading = false;
                            this.$Message.success("操作成功");
                            this.getDataList();
                            this.modalVisible = false;
                        }
                    }
                });
            },
            add() {
                this.modalType = 0;
                this.modalTitle = "添加";
                this.$refs.form.resetFields();
                delete this.form.id;
                this.modalVisible = true;
            },
            edit(v) {
                this.modalType = 1;
                this.modalTitle = "编辑";
                this.$refs.form.resetFields();
                // 转换null为""
                for (let attr in v) {
                    if (v[attr] === null) {
                        v[attr] = "";
                    }
                }
                let str = JSON.stringify(v);
                let data = JSON.parse(str);
                this.form = data;
                this.modalVisible = true;
            },
            remove(v) {
                this.$Modal.confirm({
                    title: "确认删除",
                    // 记得确认修改此处
                    content: "您确认要删除 " + v.name + " ?",
                    loading: true,
                    onOk: () => {
                        // 删除
                        // this.deleteRequest("请求地址，如/deleteByIds/" + v.id).then(res => {
                        //   this.$Modal.remove();
                        //   if (res.success) {
                        //     this.$Message.success("操作成功");
                        //     this.getDataList();
                        //   }
                        // });
                        // 模拟请求成功
                        this.$Message.success("操作成功");
                        this.$Modal.remove();
                        this.getDataList();
                    }
                });
            },
            delAll() {
                if (this.selectCount <= 0) {
                    this.$Message.warning("您还未选择要删除的数据");
                    return;
                }
                this.$Modal.confirm({
                    title: "确认删除",
                    content: "您确认要删除所选的 " + this.selectCount + " 条数据?",
                    loading: true,
                    onOk: () => {
                        let ids = "";
                        this.selectList.forEach(function(e) {
                            ids += e.id + ",";
                        });
                        ids = ids.substring(0, ids.length - 1);
                        // 批量删除
                        // this.deleteRequest("请求地址，如/deleteByIds/" + ids).then(res => {
                        //   this.$Modal.remove();
                        //   if (res.success) {
                        //     this.$Message.success("操作成功");
                        //     this.clearSelectAll();
                        //     this.getDataList();
                        //   }
                        // });
                        // 模拟请求成功
                        this.$Message.success("操作成功");
                        this.$Modal.remove();
                        this.clearSelectAll();
                        this.getDataList();
                    }
                });
            }
        },
        mounted() {
            this.init();
        }
    };
</script>
<style lang="less">
    .search {
        .operation {
            margin-bottom: 2vh;
        }
        .select-count {
            font-size: 13px;
            font-weight: 600;
            color: #40a9ff;
        }
        .select-clear {
            margin-left: 10px;
        }
        .page {
            margin-top: 2vh;
        }
        .drop-down {
            font-size: 13px;
            margin-left: 5px;
        }
    }
</style>